<template>
  <div class="clipDoll-warp1">
    <div class="coip">
      <div class="balance">
        <NuxtImg src="/images/activity/clipdoll/coip.png" alt="" />
        <span>{{ userStore.moneyUnit }}{{ balance }}</span>
      </div>
      <div class="btn" @click="handleWithdrawal">
        {{ lang.top_info_withdrawal }}
      </div>
    </div>

    <div class="progress-container">
      <div class="progress-bar">
        <div
          class="progress-inner"
          :style="{ width: progressPercentage + '%' }"
        ></div>
      </div>
    </div>

    <p class="remaining-text">
      {{ lang.top_info_remaining }}
      <span>{{ userStore.moneyUnit }}{{ remainingAmount }}</span>
      {{ lang.top_info_before_withdrawal }}
      <span>{{ withdrawalThreshold }}</span>
    </p>
  </div>
</template>

<script setup lang="ts">
const lang: any = getCurrentPageLang("activity/clipdoll");
const userStore = useUserStore();

// 数据
const balance = ref("10.00");
const remainingAmount = ref("88.00");
const withdrawalThreshold = ref("88");
const progressPercentage = ref(0);

// 计算进度条百分比
const calculateProgress = () => {
  const current = parseFloat(balance.value) || 0;
  const target = parseFloat(withdrawalThreshold.value) || 0;
  if (target <= 0) return 0;

  const percentage = Math.min((current / target) * 100, 100);
  progressPercentage.value = Math.round(percentage);
};

// 处理提现
const handleWithdrawal = () => {
  // TODO: 实现提现逻辑
  console.log("Withdrawal clicked");
};

// 监听数据变化
watch([balance, withdrawalThreshold], () => {
  calculateProgress();
});

// 初始化
onMounted(() => {
  calculateProgress();
});
</script>

<style lang="scss" scoped>
.clipDoll-warp1 {
  margin: 0 auto;
  width: 9.39rem;
  height: 3.9rem;
  background-image: url("/images/activity/clipdoll/warp1.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  box-sizing: border-box;
  padding: 1rem;
  color: #fff;

  .coip {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .balance {
      display: flex;
      align-items: center;
      font-weight: 600;
      font-size: 0.6rem;

      img {
        width: 1rem;
        margin-right: 0.2rem;
      }
    }

    .btn {
      width: 2.5rem;
      height: 0.85rem;
      background: var(--theme-dec4);
      border-radius: 0.15rem;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--theme-neutral1);
      font-weight: 700;
      font-size: 0.34rem;
      cursor: pointer;
      transition: background-color 0.2s ease;
    }
  }

  .progress-container {
    margin: 0.3rem auto;

    .progress-bar {
      background: #444;
      border-radius: 100px;
      height: 0.2rem;
      overflow: hidden;
      position: relative;

      .progress-inner {
        background-color: var(--theme-dec4);
        border-radius: 100px;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        transition: width 0.6s ease;
      }
    }
  }

  .remaining-text {
    text-align: center;
    font-size: 0.3rem;

    span {
      color: var(--theme-dec4);
    }
  }
}
</style>
